// .px2rem(@p, @px) {
//     #{@p}: @px / 75px * 1rem;
// }

.px2rem(@name, @px) {
    @{name}: @px / 46 * 1rem;
}


body {
    width: 100%;
}

.box1 {
    width: 100%;
    .box1_head {
        background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
        .px2rem(height,200);
        .site {
            display: flex;
            .px2rem(height, 65);
            justify-content: space-between;
            .city {
                width: 65%;
                display: flex;
                align-items: center;
                img {
                    margin: 0 0.2rem;
                    .px2rem(width, 30);
                    .px2rem(height, 30);
                }
                h6 {
                    .px2rem(font-size, 24);
                    display: flex;
                    color: #ffffff;
                }
            }
            .weath {
                margin: 0 0.3rem;
                width: 15%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                section {
                    p {
                        .px2rem(font-size, 25);
                        color: #fff;
                    }
                }
                i {
                    .px2rem(font-size, 40);
                    color: green;
                }
            }
        }
        .search {
            width: 100%;
            .px2rem(height, 85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
            p {
                width: 80%;
                background: #fff;
                text-align: center;
                .px2rem(height, 60);
                .px2rem(font-size, 20);
                .px2rem(line-height, 60);
            }
        }
        ul {
            display: flex;
            .px2rem(height, 50);
            .px2rem(font-size, 15);
            .px2rem(line-height, 50);
            li {
                width: 1/8*100%;
                text-align: center;
                color: #fff;
            }
        }
    }
    .nav {
        position: relative;
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        .px2rem(height, 240);
        .swiper-container {
            width: 100%;
            .px2rem(height, 240);
            position: absolute;
            left: 0;
            top: 0;
        }
        .swiper-slide {
            background-position: center;
            background-size: cover;
            display: flex;
            flex-wrap: wrap;
            dl {
                width: 25%;
                .px2rem(height, 100);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                dd {
                    img {
                        .px2rem(width, 70);
                        .px2rem(height, 70);
                    }
                }
                dt {
                    p {
                        .px2rem(font-size, 20);
                    }
                }
            }
        }
    }
    .banner {
        img {
            width: 90%;
            margin: 5%;
        }
    }
    .hot {
        display: flex;
        flex-wrap: wrap;
        width: 95%;
        margin: 0 auto;
        .hot_one {
            width: 43%;
            margin: 1%;
            background: #eee;
            padding: 0 0 0 5%;
            h3 {
                .px2rem(font-size, 22);
                color: red;
                .px2rem(line-height, 40);
            }
            h4 {
                .px2rem(line-height, 30);
                .px2rem(font-size, 16);
                color: #aaa;
            }
            p {
                font-weight: 900;
                .px2rem(font-size, 16);
                span {
                    color: red;
                    .px2rem(line-height, 30);
                }
            }
            figure {
                display: flex;
                justify-content: flex-end;
                img {
                    .px2rem(width, 150);
                    .px2rem(height, 130);
                }
            }
        }
        .hot_two {
            width: 43%;
            margin: 1%;
            background: #eee;
            padding: 0 0 0 5%;
            h3 {
                .px2rem(font-size, 22);
                .px2rem(line-height, 40);
            }
            h4 {
                .px2rem(line-height, 30);
                .px2rem(font-size, 16);
                color: #aaa;
            }
            p {
                font-weight: 900;
                .px2rem(font-size, 16);
                color: #b18564;
            }
            figure {
                display: flex;
                justify-content: flex-end;
                img {
                    .px2rem(width, 150);
                    .px2rem(height, 130);
                }
            }
        }
        .hot_three {
            width: 31%;
            text-align: center;
            margin: 1%;
            background: #eee;
            h3 {
                font-weight: 900;
                .px2rem(font-size, 22);
                text-align: center;
                .px2rem(line-height, 30);
            }
            span {
                display: inline-block;
                color: red;
                .px2rem(font-size, 16);
                .px2rem(line-height, 30);
            }
            img {
                .px2rem(width, 118);
                .px2rem(height, 75);
            }
        }
        .hot_four {
            width: 31%;
            text-align: center;
            margin: 1%;
            background: #eee;
            h3 {
                font-weight: 900;
                .px2rem(font-size, 22);
                text-align: center;
                .px2rem(line-height, 30);
            }
            span {
                display: inline-block;
                .px2rem(font-size, 13);
                .px2rem(line-height, 30);
            }
            img {
                .px2rem(width, 118);
                .px2rem(height, 75);
            }
        }
        .hot_five {
            width: 31%;
            text-align: center;
            margin: 1%;
            background: #eee;
            h3 {
                font-weight: 900;
                .px2rem(font-size, 22);
                text-align: center;
                .px2rem(line-height, 30);
            }
            span {
                display: inline-block;
                .px2rem(font-size, 16);
                .px2rem(line-height, 30);
            }
            img {
                .px2rem(width, 118);
                .px2rem(height, 75);
            }
        }
    }
    .tuijian {
        .px2rem(font-size, 25);
        padding: 0 5%;
        .px2rem(line-height, 40);
    }
    .shopList {
        width: 95%;
        margin: 0 auto;
        .px2rem(margin-bottom, 90);
        .shops_1 {
            display: flex;
            .shop1_fig {
                img {
                    .px2rem(width, 110);
                    .px2rem(margin-top, 10);
                    .px2rem(height, 110);
                }
            }
            div {
                margin-left: 5%;
                flex: 1;
                h3 {
                    .px2rem(font-size, 22);
                    .px2rem(line-height, 45);
                    font-weight: bolder;
                }
                p {
                    .px2rem(font-size, 15);
                    .px2rem(line-height, 35);
                    color: #2A2525;
                    span {
                        color: skyblue;
                    }
                }
                .dis {
                    display: flex;
                    justify-content: space-between;
                    .px2rem(font-size, 15);
                    .px2rem(line-height, 35);
                    span {
                        color: red;
                    }
                }
                .shops_2 {
                    border-top: 1px solid #ccc;
                    .px2rem(margin-top, 10);
                }
            }
        }
    }
    .foot {
        display: flex;
        .px2rem(height, 100);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: #fff;
        color: #444;
        width: 100%;
        section {
            width: 25%;
            text-align: center;
            .px2rem(padding-top, 15);
            i {
                .px2rem(font-size, 40);
            }
            p {
                .px2rem(font-size, 20);
            }
        }
        .foot_active {
            color: red;
        }
    }
}

.box2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #eee;
    z-index: 999;
    .box2_head {
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
        .px2rem(height, 50);
        p {
            .px2rem(font-size, 40);
            color: #fff;
            margin: 0 3%;
        }
        h3 {
            flex: 1;
            .px2rem(font-size, 22);
            color: #fff;
            text-align: center;
        }
    }
    .box2_sear {
        background: #fff;
        .px2rem(height, 70);
        display: flex;
        justify-content: center;
        align-items: center;
        input {
            width: 90%;
            .px2rem(height, 50);
            .px2rem( border-radius, 10);
            outline: none;
            -webkit-appearance: none;
            border: none;
            background: #eee;
            .px2rem(text-indent, 25);
            color: #aaa;
        }
    }
    .box2_site {
        background: #fff;
        p {
            width: 100%;
            .px2rem(text-indent, 25);
            .px2rem(line-height, 50);
            background: #eee;
            .px2rem(font-size, 20);
            color: #4A4A51;
        }
        h4 {
            display: flex;
            .px2rem(text-indent, 25);
            .px2rem(line-height, 60);
            .px2rem(font-size, 28);
            font-weight: 600;
            background: #fff;
            span {
                display: flex;
                flex: 1;
                justify-content: flex-end;
                .px2rem(font-size, 22);
                color: rgb(35, 149, 255);
                font-weight: 300;
                i {
                    margin: 0 4%;
                    .px2rem(font-size, 30);
                }
            }
        }
    }
}